<div id="giphy-modal" data-bind="with: $root.giphy" class="giphy-modal modal modal-large">
  <div class="modal-content">
    <div class="giphy-modal-header modal-header">
      <!-- ko if: show_giphy_button -->
        <span class="button-icon icon-grid" data-bind="click: on_giphy_button"></span>
      <!-- /ko -->
      <!-- ko ifnot: show_giphy_button -->
        <span class="button-icon icon-back" data-bind="click: on_back" data-uie-name="do-close"></span>
      <!-- /ko -->
      <span class="label-xs" data-bind="text: query" data-uie-name="giphy-query"></span>
      <span class="button-icon icon-close pull-right" data-bind="click: on_close" data-uie-name="do-close"></span>
    </div>
    <div class="giphy-modal-center modal-center">
      <div class="gif-container-spinner" data-bind="visible: state() === 'loading'">
        <div class="icon-spinner spin"></div>
      </div>
      <div class="gif-container"
           data-bind="foreach: gifs, visible: state() === 'results', css: {'gif-container-grid': gifs().length > 1}">
        <!-- ko if: $parent.gifs().length === 1 -->
          <div class="gif-container-item"
               data-bind="load_image: $data.animated, style: {backgroundImage: 'url(\'' + $data.static + '\')'}">
          </div>
        <!-- /ko -->
        <!-- ko if: $parent.gifs().length > 1 -->
          <div class="gif-container-item"
               data-bind="click: $parent.on_clicked_gif,
                          style: {backgroundImage: 'url(\'' + $data.static + '\')'},
                          attr: {'data-src': $data.static, 'data-hover': $data.animated},
                          load_image_on_hover: true,">
          </div>
        <!-- /ko -->
      </div>
      <div class="gif-container-error" data-bind="visible: state() === 'error'">
        <span class="gif-container-error-message" data-bind="l10n_text: z.string.extensionsGiphyNoGifs"></span>
      </div>
    </div>
    <div class="giphy-modal-footer modal-footer">
      <div class="button button-inverted"
           data-bind="click: on_try_another, l10n_text: z.string.extensionsGiphyButtonMore, css: {'button-disabled': gifs().length === 0}"
           data-uie-name="do-try-another"></div>
      <div class="button"
           data-bind="click: on_send, l10n_text: z.string.extensionsGiphyButtonOk, css: {'button-disabled': !selected_gif()}"
           data-uie-name="do-send-gif"></div>
    </div>
  </div>
</div>
